<template>
  <q-header elevated class="bg-primary text-white">
    <q-toolbar>
      <!-- 左侧菜单按钮 -->
      <q-btn flat dense round icon="menu" aria-label="Menu" @click="toggleDrawer" />

      <!-- 标题 -->
      <q-toolbar-title> 管理系统 </q-toolbar-title>

      <q-space />

      <!-- 通知按钮 -->
      <q-btn flat round dense icon="notifications" class="q-mr-sm">
        <q-badge color="red" floating>5</q-badge>
        <q-menu>
          <q-list style="min-width: 300px">
            <q-item clickable v-close-popup>
              <q-item-section>您有5条未读消息</q-item-section>
            </q-item>
            <q-separator />
            <q-item v-for="n in 5" :key="n" clickable>
              <q-item-section>
                <q-item-label>通知标题 {{ n }}</q-item-label>
                <q-item-label caption>通知内容描述...</q-item-label>
              </q-item-section>
            </q-item>
          </q-list>
        </q-menu>
      </q-btn>

      <!-- 用户头像和下拉菜单 -->
      <q-btn flat round dense>
        <q-avatar size="32px">
          <img src="profile.svg" />
        </q-avatar>
        <q-menu auto-close>
          <q-list style="min-width: 150px">
            <q-item clickable :to="{ name: 'profile' }">
              <q-item-section avatar>
                <q-icon name="person" />
              </q-item-section>
              <q-item-section>个人主页</q-item-section>
            </q-item>
            <q-item clickable @click="settingsRef.openSetting()">
              <q-item-section avatar>
                <q-icon name="settings" />
              </q-item-section>
              <q-item-section>布局设置</q-item-section>
            </q-item>
            <q-separator />
            <q-item clickable @click="logout">
              <q-item-section avatar>
                <q-icon name="logout" />
              </q-item-section>
              <q-item-section>退出登录</q-item-section>
            </q-item>
          </q-list>
        </q-menu>
      </q-btn>
    </q-toolbar>
  </q-header>
  <Settings ref="settingsRef" />
</template>

<script setup>
const { proxy } = getCurrentInstance()
import Settings from '../Settings'
const emit = defineEmits(['toggle-drawer'])

const settingsRef = ref(null)

const toggleDrawer = () => {
  emit('toggle-drawer')
}

const logout = () => {
  proxy.$q
    .dialog({
      title: '确认',
      message: '确定要退出登录吗？',
      cancel: true,
      persistent: true,
    })
    .onOk(() => {
      proxy.$q.notify({
        type: 'positive',
        message: '已退出登录',
      })
    })
}

const openSettings = () => {
  proxy.$q.notify({
    message: '打开布局设置',
    icon: 'settings',
  })
}
</script>
